<template>
	<div class="journal-layout">
		<div class="back">
			<el-button size="small" icon="el-icon-back" @click="handleBack">返回列表</el-button>
		</div>
		<el-tabs v-model="activeName" @tab-click="handleClick">
			<el-tab-pane label="书籍信息" name="1"></el-tab-pane>
			<!-- <el-tab-pane label="文章管理" name="2" :disabled="!curJournal.hasOwnProperty('id')"></el-tab-pane> -->
			<Add v-show="activeName == 1" :curColumn="curColumn" :activeName="activeName" />
			<Content v-if="activeName == 2" :curColumn="curColumn" />
		</el-tabs>
	</div>
</template>
<script>
import { mapGetters } from 'vuex';
export default {
	components: {
		Add: () => import('../Cover/Add.vue'),
		Content: () => import('./index.vue')
	},
	data() {
		return {
			activeName: '1'
		};
	},
	props: ['curColumn'],
	computed: mapGetters(['curJournal', 'journalFlag']),
	watch: {
		journalFlag() {
			this.activeName = '1';
		}
	},
	mounted() {},
	methods: {
		handleClick() {
			if (this.activeName == 1) {
				this.$bus.$emit('columnJournalAdd', this.curJournal);
			}
		},
		handleBack() {
			this.activeName = '1';
			this.$store.commit('changeJournalFlag', true);
		}
	}
};
</script>
<style scoped lang="scss">
.journal-layout {
	position: relative;
	.back {
		position: absolute;
		right: 0;
		top: 0;
		z-index: 9;
	}
}
</style>
